<ion-header>

  <ion-navbar>
    <ion-title>Searchbar Toolbars</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <h5 padding-left padding-top> Search - Default Toolbar </h5>
  <ion-toolbar>
    <ion-searchbar [(ngModel)]="defaultToolbarSearch"></ion-searchbar>
  </ion-toolbar>

  <h5 padding-left padding-top> Search - Primary Toolbar </h5>
  <ion-toolbar color="primary">
    <ion-searchbar dark [(ngModel)]="primaryToolbarSearch" showCancelButton></ion-searchbar>
  </ion-toolbar>

  <h5 padding-left padding-top> Search - Dark Toolbar </h5>
  <ion-toolbar color="dark">
    <ion-searchbar dark placeholder="Filter Schedules" [(ngModel)]="darkToolbarSearch"></ion-searchbar>
  </ion-toolbar>

  <h5 padding-left padding-top> Search - Light Toolbar </h5>
  <ion-toolbar color="light">
    <ion-searchbar [(ngModel)]="lightToolbarSearch" showCancelButton></ion-searchbar>
  </ion-toolbar>

</ion-content>
